<template>
    <div class="coupon-container">
        <header class="header">
            <h1>领卷中心</h1>
            <p>获取你的优惠券，享受购物乐趣！</p>
        </header>

        <section class="coupon-section">
            <div class="coupon-card" v-for="coupon in couponStore.coupons" :key="coupon.id">
                <i class="iconfont icon-youhuijuan2"></i>
                <div class="coupon-content">
                    <div class="coupon-icon">
                        <h2>{{ coupon.title }}</h2>
                    </div>
                    <p class="discount">{{ coupon.discount }}元优惠</p>
                    <p class="validity">有效期：{{ coupon.validity }}</p>
                    <button :disabled="couponStore.hasReceivedCoupon(coupon.id) || couponStore.isCouponValid(coupon)"
                        class="claim-button" @click="couponStore.claimCoupon(coupon.id)"
                        :class="{ 'button-disabled': couponStore.hasReceivedCoupon(coupon.id) || couponStore.isCouponValid(coupon) }">
                        {{ couponStore.hasReceivedCoupon(coupon.id) ? '已领取' :
                couponStore.isCouponValid(coupon) ? '已过期' : '领取' }}
                    </button>
                </div>
            </div>
        </section>
    </div>
</template>

<script setup>
import { useCouponStore } from '@/stores/coupon/coupon'

//实例化couponStore
const couponStore = useCouponStore()
</script>

<style scoped>
.coupon-container {
    font-family: Arial, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.header {
    background-color: #d9534f;
    /* 标题颜色 */
    /* 主色调 */
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.header h1 {
    margin: 0;
    font-size: 2.5em;
}

.header p {
    font-size: 1.2em;
}

.coupon-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.coupon-card {
    position: relative;
    background: linear-gradient(135deg, #ffefd5, #ffdab9);
    /* 渐变背景 */
    /* 虚线边框 */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 卡片阴影 */
    font-family: Arial, sans-serif;
    transition: transform 0.3s, box-shadow 0.3s;
    animation: swing-bottom-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes swing-bottom-fwd {
    0% {
        transform: rotateX(180deg);
        transform-origin: top;
    }

    100% {
        transform: rotateX(0);
        transform-origin: top;
    }
}
.iconfont{
    position: absolute;
    top: 30;
    left: 0;
    font-size: 40px;
    width: 100%;
    color: gold;
    z-index: -1;
}
.coupon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.coupon-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.coupon-content h2 {
    font-size: 20px;
    color: #d9534f;
    /* 标题颜色 */
    margin-bottom: 10px;
}

.discount {
    font-size: 2em;
    font-weight: bold;
    color: #ff6347;
    /* 折扣金额颜色 */
    /* 报价颜色 */
}

.validity {
    font-size: 0.9em;
    color: #777;
}

.claim-button {
    margin-top: 15px;
    background-color: #f56c6c;
    /* 按钮背景颜色 */
    /* 主色调 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.button-disabled {
    background-color: #ccc;
    color: white;
    /* 设置文字颜色为白色 */
    cursor: not-allowed;
    /* 禁用鼠标点击 */
}

.claim-button:hover {
    background-color: #d9534f;
    /* 悬停时颜色变化 */
    /* 更深的颜色 */
    transform: scale(1.05);
}
</style>